<template>
  <div id="container" ref="container"></div>
</template>
<script setup>
import { ref, onMounted, defineProps, watch, defineEmits } from 'vue'
import { string } from 'vue-types';
let jessibuca = null;

const showOperateBtns = false; // 是否显示按钮
const forceNoOffscreen = true; //

let container = ref()
const emit = defineEmits();

let props = defineProps({
  videoUrl: {
    type: String,
  }
});

watch(
  () => props.videoUrl,
  (nweValue) => {
    jessibuca.play(nweValue);
    // jessibuca.setFullscreen(true)
  }
)
onMounted(() => {
  jessibuca = new window.Jessibuca({
    container: container.value,
    videoBuffer: 0.1, // 缓存时长
    isResize: false,
    text: "",
    loadingText: "",
    useMSE: false,
    debug: false,
    heartTimeoutReplay: true,
    loadingTimeoutReplay: true,
    heartTimeoutReplayTimes: -1,
    loadingTimeoutReplayTimes: -1,
    showBandwidth: showOperateBtns, // 显示网速
    operateBtns: {
      fullscreen: showOperateBtns,
      webFullscreen: showOperateBtns,
      screenshot: showOperateBtns,
      play: showOperateBtns,
      audio: false,
      recorder: false
    },
    forceNoOffscreen: forceNoOffscreen,
    isNotMute: false,
  },);


  jessibuca.setDebug(false)

  jessibuca.setTimeout(10)
  jessibuca.on('timeout', function () {
    console.log('timeout','触发发了超时')
    emit('LiveInterrupt')
  });
})
</script>
<style scoped lang="less">
#container {
  background: rgba(13, 14, 27);
  width: 100%;
  height: 100%;

  /deep/canvas {
    width: 100%;
    height: 100%;
    position: none !important;
    transform: none !important;
    top: 0 !important;
    left: 0 !important;
  }
}
</style>
